{{ title 'Manage Crate Owners' }}

<div class="crates-heading">
  {{svg-jar "gear"}}
  <h1>Manage Crate Owners</h1>
  <h2>{{ this.crate.name }}</h2>
</div>

<div id="me-email">
  <h2>Add Owner</h2>

  <div class="row">
    <form class="email-form" {{action 'addOwner' on='submit'}}>
      <label class="label" for='new-owner-username'>
        Username
      </label>
      <Input @type="text" id="new-owner-username" @value={{this.username}} placeholder="Username" class="form-control space-right" @name="username" />

      {{#if this.error}}
        <div class='error'>
          <p class='small-text error'>{{this.error}}</p>
        </div>
      {{/if}}

      {{#if this.invited}}
        <div class='invited'>
          <p>{{this.invited}}</p>
        </div>
      {{/if}}

      <div class="actions">
        <button id="add-owner" type="submit" class="small yellow-button space-right">Save</button>
      </div>
    </form>
  </div>
</div>

<h2>Owners</h2>

{{#if this.removed}}
  <div class='removed'>
    <p>{{this.removed}}</p>
  </div>
{{/if}}

<div class='owners white-rows'>
  {{#each this.crate.owner_team as |team|}}
    <div class='crate row' data-test-owner-team={{team.login}}>
      <div>
        <LinkTo @route={{team.kind}} @model={{team.login}}>
          <UserAvatar @user={{team}} @size="medium-small" />
        </LinkTo>
      </div>
      <div>
        <LinkTo @route={{team.kind}} @model={{team.login}}>
          {{team.display_name}}
        </LinkTo>
      </div>
      <div class='stats'>
        {{#if team.email}}
          {{team.email}}
        {{else}}
          &nbsp;
        {{/if}}
      </div>
      <div class='stats downloads'>
        <button type="button" class='remove-owner small yellow-button' {{action 'removeOwner' team}}>Remove</button>
      </div>
    </div>
  {{/each}}
  {{#each this.crate.owner_user as |user|}}
    <div class='crate row' data-test-owner-user={{user.login}}>
      <div>
        <LinkTo @route={{user.kind}} @model={{user.login}}>
          <UserAvatar @user={{user}} @size="medium-small" />
        </LinkTo>
      </div>
      <div>
        <LinkTo @route={{user.kind}} @model={{user.login}}>
          {{ user.name }}
        </LinkTo>
      </div>
      <div class='stats'>
        {{#if user.email}}
          {{user.email}}
        {{else}}
          &nbsp;
        {{/if}}
      </div>
      <div class='stats downloads'>
        <button type="button" class='remove-owner small yellow-button' {{action 'removeOwner' user}}>Remove</button>
      </div>
    </div>
  {{/each}}
</div>
